<template>
   <div class="list" ref="wrapper">
       <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{this.$store.state.city}}</div>
                    </div>             
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="hotCity of hotCities" :key="hotCity.id" @click="handleCityClick(hotCity.name)">
                        <div class="button">{{hotCity.name}}</div>
                    </div> 
                </div>
            </div>
            <div class="area" v-for="(city,key) of cities" :key="key" :ref="key">
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                    <div class="item border-bottom" v-for="item of city" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</div>              
                </div>               
            </div>
       </div>
   </div> 
</template>
<script>
import Bscroll from 'better-scroll'
export default {
   name:'CityList',
   props:{
       cities:Object,
       hotCities:Array,
       letter:String
   },
   methods:{
       handleCityClick (city) {
           this.$store.commit('changeCity',city) //触发/store/index.js下面的actions方法,dispatch是要根据actions转发的,使用commit就不需要action转发了
           this.$router.push('/') //跳转到跟目录
       }
   },
   mounted () {
      this.scroll = new Bscroll(this.$refs.wrapper)
   },
   watch:{
       letter () {          //一旦letter发生改变就被监听到           
           if(this.letter){  
               //console.log(this.$refs[this.letter])这是一个数组         
               const element = this.$refs[this.letter][0] //dom元素
               this.scroll.scrollToElement(element)  //下面是Bscroll提供的方法，scrollToElement(dom元素)
           }
       }
   }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
    &:before            //伪元素上边给颜色
        border-color:#ccc
    &:after             //伪元素下边给颜色
        border-color:#ccc
.border-bottom
    &:before            //伪元素上边给颜色
        border-color:#ccc
.list
    overflow :hidden
    position:absolute
    top:1.78rem
    left:0
    right:0
    bottom:0
    .title
        line-height :.54rem
        background:#eee
        padding-left: .2rem
        color:#666
        font-size:.26rem
    .button-list
        overflow :hidden //显示按钮
        padding: .1rem .6rem .1rem .1rem //为右边预留30个像素
        .button-wrapper    
            float:left
            width:33.3%
            .button            
                margin:.1rem
                padding:.1rem 0
                text-align:center
                border:.02rem solid #ccc 
                border-radius:.06rem //等于3像素  
    .item-list
        .item
            line-height : .76rem        
            padding-left:.2rem              
</style>